<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="css/loupe.css">
</head>

<body>
    <header>

    </header>
    <section>
        <div id="loupe_top">
            <div class="loupe_top_img">
                <img src="img/bao-head.jpg" alt="">
            </div>
            <div class="loupe_top_layout">
                <ul class="loupe_top_nav">
                    <li>首页</li>
                    <li class="drop-down">全部商品
                        <span></span>
                        <ol>
                            <li> > 潮流小方包</li>
                            <li> > 系列分类</li>
                            <li> > 大小分类</li>
                            <li> > 功能分类</li>
                            <li> > 包型分类</li>
                            <li> > 时尚手机包</li>
                        </ol>
                    </li>
                    <li>明星同款</li>
                    <li class="drop-down">大小分类
                        <span></span>
                        <ol>
                            <li> > 大包系类</li>
                            <li> > 小包系类</li>
                            <li> > 小方包系类</li>
                            <li> > 水桶包系类</li>
                        </ol>
                    </li>
                    <li class="drop-down">功能分类
                        <span></span>
                        <ol>
                            <li> > 双肩包</li>
                            <li> > 钱包/卡包</li>
                            <li> > 单肩斜挎包</li>
                            <li> > 手提包</li>
                            <li> > 多用包</li>
                            <li> > 手拿包</li>
                        </ol>
                    </li>
                </ul>

            </div>
        </div>
        <div id="loupe_bottom">
            <!-- 放大镜小盒子加显示的小图片 -->
            <div class="loupe_lef_wrap">
                <div class="small-box">
                    <div class="mask">

                    </div>
                    <!-- 放大镜大盒子 -->
                    <div class="big-box">

                    </div>
                    <ul class="small_show">
                        <li><img src="img/bao1.jpg"></li>
                        <li><img src="img/bao2.jpg"></li>
                        <li><img src="img/bao3.jpg"></li>
                        <li><img src="img/bao4.jpg"></li>
                        <li><img src="img/bao5.jpg"></li>
                    </ul>
                </div>
            </div>
            <div class="loupe_rig_wrap">
                <h1 class="goods-title">夏季大容量女士包包2020新款潮时尚涂鸦帆布手提托特包购物袋</h1>
                <div class="goods-main">
                    <div class="goods-main_top">
                        <p class="goods_before_price tag">价格：</p>
                        <span class="num before_price">￥159.00</span>
                    </div>
                    <div class="goods-main_bottom">
                        <div class="lef">
                            <p class="goods_after_price tag">促销价：</p>
                            <span class="num after_price">￥49.90</span>
                        </div>
                        <div class="rig">
                            <p class="comment tag">评价：<span>999+</span></p>
                            <p class="sales_volume tag">评价：<span>99+</span></p>
                        </div>
                    </div>
                </div>
                <div class="goods_service">
                    <p class="service_text">客服：</p>
                    <img src="img/客服.gif" alt="">
                </div>
                <div class="goods_colour">
                    <p class="colour_text">颜色：</p>
                    <ul class="colour_choice">
                        <li>白色</li>
                        <li>黑色</li>
                        <li>棕色</li>
                    </ul>
                </div>
                <div class="goods_num">
                    <p class="num_text">数量：</p>
                    <div class="input_box">
                        <button class="sub_but">-</button>
                        <input type="text" class="input_num" value="1">
                        <button class="add_but">+</button>
                    </div>
                    <p class="repertory">
                        库存<span>2897</span>件
                    </p>
                </div>
                <div class="goods_buy_box">
                    <button class="goods_buy_but">立即购买</button>
                    <button class="goods_add_but">加入购物车</button>
                </div>
                <div class="goods_share">
                    <div class="favorite_stores box">
                        <img src="img/xing.png" alt="">
                        <span>334</span>
                    </div>
                    <div class="share box">
                        <span class="share_img">+</span>
                        <p class="share_text">分享</p>
                    </div>
                    <p class="text">举报</p>
                </div>
                <div class="service_description">
                    <p class="service_text">服务说明：</p>
                    <ul class="service_box">
                        <li>
                            <img src="img/yuan_dui.png" alt="">
                            <span>72小时发货</span>
                        </li>
                        <li>
                            <img src="img/yuan_dui.png" alt="">
                            <span>7天无理由退货</span>
                        </li>
                        <li>
                            <img src="img/yuan_dui.png" alt="">
                            <span>延误必赔</span>
                        </li>
                        <li>
                            <img src="img/yuan_dui.png" alt="">
                            <span>退货运费险</span>
                        </li>
                    </ul>
                </div>
                <div class="payment">
                    <p class="payment_text">支付方式：</p>
                    <img src="img/weiandzhi.png" alt="">
                </div>
            </div>

        </div>
    </section>
    <footer>

    </footer>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/xiding.js"></script>

    <script>
        $("header").load("./head.html", function() {})
        $("footer").load("./foot.html", function() {})

        // 放大镜
        class Magnifier {
            constructor(smallBox, mask, bigBox, showImg) {
                this.smallBox = smallBox;
                this.mask = mask;
                this.bigBox = bigBox;
                this.showImg = showImg;
                this.eventBind();
            }

            mouseover() {
                let that = this;
                this.smallBox.onmouseover = function() {
                    that.mask.style.display = "block";
                    that.bigBox.style.display = "block";
                }
            }

            mouseout() {
                let that = this;
                this.smallBox.onmouseout = function() {
                    that.mask.style.display = "none";
                    that.bigBox.style.display = "none";
                }
            }

            mousemove() {
                let that = this;
                this.smallBox.onmousemove = function(evt) {
                    let e = evt || event;
                    let left = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
                    let top = e.pageY - this.offsetTop - that.mask.offsetHeight / 2;
                    // console.log(this.offsetTop)
                    // console.log(this.offsetLeft)
                    if (left < 0) {
                        left = 0;
                    }

                    let maxLeft = this.offsetWidth - that.mask.offsetWidth;

                    if (left > maxLeft) {
                        left = maxLeft;
                    }

                    if (top < 0) {
                        top = 0;
                    }

                    let maxTop = this.offsetHeight - that.mask.offsetHeight;

                    if (top > maxTop) {
                        top = maxLeft;
                    }

                    let x = left * that.bigBox.offsetWidth / that.mask.offsetWidth;
                    let y = top * that.bigBox.offsetHeight / that.mask.offsetHeight;

                    that.mask.style.left = left + "px";
                    that.mask.style.top = top + "px";

                    that.bigBox.style.backgroundPositionX = -x + "px";
                    that.bigBox.style.backgroundPositionY = -y + "px";
                }
            }

            eventBind() {
                this.mouseover();
                this.mouseout();
                this.mousemove();
            }
        }
        let oSmallBox = document.querySelector(".small-box");
        let oMask = document.querySelector(".mask");
        let oBigBox = document.querySelector(".big-box");

        let mf = new Magnifier(oSmallBox, oMask, oBigBox);
        $(".small_show li").mouseover(function() {
            $(this).css({
                borderBottom: "3px solid #ef2e21"
            }).siblings("li").css({
                borderBottom: "none"
            })
            let obj = $(this).children().attr("src");
            $(".small-box").css({
                "backgroundImage": "url(" + obj + ")"
            });

            $(".big-box").css({
                "backgroundImage": "url(" + obj + ")"
            });
        })
        $(".add_but").eq(0).click(function() {
            let count = parseInt($(".input_num").eq(0).val());
            // count++不行，++count可以
            $(".input_num").eq(0).val(++count)
        })
        $(".sub_but").eq(0).click(function() {
            let count = parseInt($(".input_num").eq(0).val());
            if (count < 1) {
                return;
            }
            $(".input_num").eq(0).val(--count)

        })
    </script>
</body>

</html>